import { useDispatch, useSelector } from 'react-redux';
import { addTodo, delTodo } from './store/action/todos';
import { RootState } from './store/store';

// type TodoList = {
//   id: number;
//   text: string;
//   done: boolean;
// }[];

// type RootState = {
//   todos: TodoList;
// };

export const Todos = () => {
  const dispatch = useDispatch();
  // 第一种类型约束方法
  // const todos = useSelector<RootState, TodoList>((state) => state.todos);
  // console.log('todos', todos);

  // 第二种，TS 推断
  const todos = useSelector((state: RootState) => state.todos);
  console.log('todos==>', todos);

  const handleAddTodo = () => {
    // dispatch action
    dispatch(addTodo('添加todo'));
  };

  const handleDelTodo = (id: number) => {
    console.log(id);
    dispatch(delTodo(id));
  };

  return (
    <div>
      <h3>Todos</h3>
      {todos.map((item) => (
        <li key={item.id} onClick={() => handleDelTodo(item.id)}>
          {item.text}
        </li>
      ))}
      <button onClick={handleAddTodo}>添加Todo</button>
    </div>
  );
};
